<template>
  <div class="">
    <!-- 搜索区------------------ -->
    <form action="/">
      <van-search
        v-model="searchKey"
        show-action
        background="#3296fa"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @focus="isShowResult = false"
      />
    </form>
    <!-- 搜索结果------------------ -->
    <SearchResult v-if="isShowResult" :searchKey="searchKey" />
    <!-- 搜索建议------------------ -->
    <SearchSuggestion
      v-else-if="searchKey"
      :searchKey="searchKey"
      @search="onSearch"
    />
    <!-- 搜索历史------------------ -->
    <SearchHistory
      v-else
      :searchList="searchHistory"
      @onDelAll="searchHistory = []"
    />
  </div>
</template>

<script>
import SearchHistory from './components/SearchHistory.vue'
import SearchResult from './components/SearchResult.vue'
import SearchSuggestion from './components/SearchSuggestion.vue'

// 导入 api
import { setItem, getItem } from '@/utils/storage.js'
import config from '@/config/index.js'

export default {
  name: '',
  props: {},
  data() {
    return {
      // 标记是否显示 搜索结果
      isShowResult: false,
      // 搜索关键字
      searchKey: '',
      // 搜索历史数组 弦理论  光速 30万公里/秒
      searchHistory: getItem(config.SEARCH_HISTORY) // ['a','b','c']
    }
  },
  created() {},
  methods: {
    // 1.执行搜索---------------------------------
    onSearch(key) {
      // 1.1将 关键字 设置给 文本框---
      this.searchKey = key
      // 1.2处理 搜索历史的 保存------
      // a.如果 关键字 在搜索历史中存在，则删除之
      const i = this.searchHistory.indexOf(this.searchKey)
      if (i > -1) {
        this.searchHistory.splice(i, 1)
      }
      // b.将 本次 关键字 添加到 搜索历史头部
      this.searchHistory.unshift(this.searchKey)
      // 1.3标记 显示 搜索结果组件----
      this.isShowResult = true
    }
  },
  computed: {},
  // 侦听器
  watch: {
    // 侦听 搜索历史数组 的变化
    searchHistory(v) {
      // 将 搜索历史 保存到 本地
      setItem(config.SEARCH_HISTORY, this.searchHistory)
    }
    // searchHistory: {
    //   handler() {},
    //   deep: true,
    //   immediate: true
    // }
  },
  components: {
    SearchSuggestion,
    SearchResult,
    SearchHistory
  }
}
</script>

<style lang="less" scoped>
.van-search__action {
  color: #fff;
}
</style>
